<template>
  <div class="container">
    <baidu-map class="box" :center="center" :scrollWheelZoom="true" :zoom="zoom" @zoomend="getZooms"
               @moveend="getCenters">

      <!--<bm-marker v-show="markShow"-->
                 <!--:top="true"-->
                 <!--:position="labelPosition"-->
                 <!--:dragging="true"-->
                 <!--:icon="{url: '../src/assets/map_images/tantiao.png', size: {'width':30,'height':50}}"-->
                 <!--:offset="{'width':0,'height':0}"></bm-marker>-->
      <bm-marker v-for="item in coordinate1"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: '../src/assets/map_images/markersfull.png', size: {'width':30,'height':50}}"
                 :offset="{'width':0,'height':0}"
                 @click="openInfo(item)">
        <bm-label :content="item.placenum.toString()" :zIndex="10000" :labelStyle="labelStyle"
                  :offset="{width: 0, height: 0}"/>
      </bm-marker>
      <bm-marker v-for="item in coordinate2"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: '../src/assets/map_images/markersidle.png', size: {'width':30,'height':50}}"
                 :offset="{'width':0,'height':0}"
                 @click="openInfo(item)">
        <bm-label :content="item.placenum.toString()" :zIndex="10000" :labelStyle="labelStyle"
                  :offset="{width: 0, height: 0}"/>
      </bm-marker>
      <bm-marker v-for="item in coordinate3"
                 :position="{lng: item.longitude, lat: item.latitude}"
                 :icon="{url: '../src/assets/map_images/markersoffduty.png', size: {'width':30,'height':50}}"
                 :offset="{'width':0,'height':0}"
                 @click="openInfo(item)">
        <bm-label :content="item.placenum.toString()" :zIndex="10000" :labelStyle="labelStyle"
                  :offset="{width: 0, height: 0}"/>
      </bm-marker>
      <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show"
                      @close="infoWindowClose" @open="infoWindowOpen">
        <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">停车场编号：{{this.infoWindow.parkNo}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">收费标准：{{this.infoWindow.chargeType}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
          停车位信息：{{this.infoWindow.totalNum}}个泊位，{{this.infoWindow.surplus}}个可用</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">
          最后上传时间: 2018-6-13:14:14:14</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
  /* eslint-disable */
  import widthVertical from '../../utils/widthVertical'

  export default {
    components: {
      widthVertical
    },
    data() {
      return {
        sortingWay: '1', // 默认排序方式 剩余泊位由高到低  2： 剩余泊位由低到高
        placeWay: '2', // 默认排序方式 按欠费金额排序  2： 按泊位排序
        placeNo: '', // 泊位编号
        parkDetail: {},
        imgChild: '',
        parkVisible: false,
        loading2: false,
        openBtn: true,
        closeBtn: false,
        markShow: false,
        center: {
          lng: 117.528544,
          lat:  36.686922
        },
        labelPosition: {
          lng: 117.528544,
          lat:  36.686922
        },
        zoom: 14,
        dataCount: 0,
        loading: false,
        tableData3: [],
        // 道路停车详情页面模拟数据
        tableData4: [],
        lng: '',
        lat: '',
        park_name: '',
        parkNums: '',
        iconUp: 'el-icon-arrow-left',
        iconDown: 'el-icon-arrow-right',
        item3Seem: false,
        itemDetail: false,
        isDisplay: false,
        pageNum: 1,
        show: false,
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          parkNo: '',
          dw: '',
          chargeType: '',
          totalNum: '',
          surplus: ''
        },
        coordinate1: [

          {  longitude: 117.541803, latitude: 36.69844,placenum:"79", parkname:'教导大队停车场',parkNo:"1001",
            ssdwname:'章丘停车公司',placenums:'301',surplus:'221'},
          {  longitude: 117.5367, latitude: 36.6908 ,placenum:"89",parkname:'电视台停车场',parkNo:"1002",
            ssdwname:'章丘停车公司',placenums:'304',surplus:'225'}
        ],
        coordinate2: [
          {  longitude: 117.533251, latitude: 36.701536 ,placenum:"59",parkname:'千禧龙北停车场',parkNo:"1003",
            ssdwname:'章丘停车公司',placenums:'307',surplus:'211'},
          {  longitude: 117.531203, latitude:36.698816,placenum:"36",parkname:'市政租赁处停车场',parkNo:"1004",
            ssdwname:'章丘停车公司',placenums:'309',surplus:'220'},
        ],
        coordinate3: [
          {  longitude: 117.53591, latitude:36.709001,placenum:"39",parkname:'电瓷场停车场',parkNo:"1005",
            ssdwname:'章丘停车公司',placenums:'321',surplus:'201'}
        ],
        labelStyle: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          zIndex: 100000,
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px'
        }
      }
    },

    methods: {
      // 实时获取地图中心点
      getCenters(val) {
        const {lng, lat} = val.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
      },
      // 实时获取地图缩放级别
      getZooms(val) {
        this.zoom = val.target.Oa
      },
      // 地图初始化时设置zoom和中心点
      handler() {
        this.center.lng = 117.033083
        this.center.lat = 36.675795
        this.zoom = 13
      },
      // 双击道路停车场展开详情页面和定位该车场
      // 关闭信息窗体
      infoWindowClose(e) {
        this.show = false
      },
      // 开启信息窗体
      infoWindowOpen(e) {
        this.show = true
      },
      // 页码改变触发
      handleCurrentChange(val) {
        this.pageNum = val
      },
      // 打开信息窗体
      openInfo(val) {
        this.infoWindow.title = val.parkname
        this.infoWindow.longirude = val.longitude
        this.infoWindow.latitude = val.latitude
        this.infoWindow.parkNo = val.parkNo
        this.infoWindow.dw = val.ssdwname
        this.infoWindow.totalNum = val.placenums
        // this.infoWindow.chargeType = val.sfbzname
        this.infoWindow.surplus = val.surplus
        this.show = true
      },
      // 展开左侧隐藏的面板
      openDia() {
        this.item3Seem = true
        this.closeBtn = true
        this.openBtn = false
      },
      // 关闭左侧面板
      cloaseDia() {
        this.item3Seem = false
        this.itemDetail = false
        this.closeBtn = false
        this.openBtn = true
      },
      // 返回上一页
      backPage() {
        this.itemDetail = false
        this.item3Seem = true
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  /*覆盖element-ui的样式*/
  .park_card {
    .el-table {
      .cell {
        line-height: 23px;
      }
    }
  }

</style>
<style scoped>
  .sortData .el-col {
    text-align: right;
  }

  .left_row {
    width: 100%;
    height: 130px;
  }

  .right_row {
    padding-left: 6px;
    width: 100%;
    height: 130px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
  }

  .right_row p {
    margin: 0;
  }

  .sj {
    margin-left: 10px;
  }

  .label_span {
    color: gray;
  }

  .head_det {
    width: 100%;
    font-family: MicrosoftYaHei;
    font-size: 12px;
  }

  .btnSearch1 {
    width: 60px;
    height: 20px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 4px;
  }

  .spanBtn {
    width: 40px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 8px;
    margin-left: 6px;
  }

  .detailMes {
    color: gray;
    font-family: MicrosoftYaHei;
    font-size: 12px;
  }

  .table_head {
    width: 270px;
    z-index: 9999;
    padding-left: 10px;
    float: left;
    top: 32px;
    font-family: MicrosoftYaHei;
    color: #7A7A7A;
    font-size: 12px;
    font-weight: bold;
  }

  .reduicesMsg strong {
    color: red;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    margin-left: 10px;
  }

  .reduicesMsg {
    color: gray;
    font-family: MicrosoftYaHei;
    font-size: 14px;
  }

  .container {
    position: relative;
    padding: 20px;
    width: 100%;
    height: 85vh;
  }

  .input_class {
    width: 350px;
    height: 5%;
    margin-bottom: 5px;
  }

  .el-input {
    width: 100%;
    height: 100%;
  }

  .park_card {
    width: 400px;
    height: 95%;
  }

  .card_left {
    width: 350px;
    height: 100%;
    background-color: #fff;
    float: left;
  }

  .card_right {
    float: left;
    width: 50px;
    height: 100%;
  }

  .card_head {
    height: 5%;
    padding-top: 11px;
    width: 100%;
    font-size: 16px;
    text-align: center;
    font-family: MicrosoftYaHei;
  }

  .card_main {
    width: 100%;
    height: 78%;
  }

  .card_footer {
    text-align: center;
    padding-top: 20px;
    width: 100%;
    border-top: 1px solid gray;
    height: 10%;
  }

  .card_head strong {
    color: #3b91b6;
  }

  .card_right .el-row {
    width: 100%;
    height: 15%;
  }

  .card_right .el-button {
    width: 50px;
    height: 100%;
    margin: 0px;
    background-color: #fff;
  }

  .box {
    width: 100%;
    height: 100%;
  }
</style>
